<template>
	<view class="app">
		<view class="swiper">
			<!--轮播 -->
			<u-swiper :list="house.imgUrls" @change="changeHandler" :autoplay="false" indicatorStyle="left: 20px"
				height="400rpx">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ house.imgUrls.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="home-owner">
			<view style="display: flex; justify-content: left;align-items: center;margin-left: 15rpx">
				<u-avatar size="40" :src="master.image">
					
				</u-avatar>
				<view>
					<view style="margin-left: 15rpx;margin-top:-25rpx">
						<u--text bold size="35rpx" :text="master.userName" class="motext"></u--text>
					</view>
					<!-- <view>
            <u--text color="#8D9099" text="十年" class="motext"></u--text>
          </view> -->
				</view>
				<view class="subscribe">
					<text style="font-size: 28rpx" @click="">关注</text>
				</view>
			</view>
			<view>
				<text style="font-size: 35rpx;font-weight: bold">{{house.introduce}}</text>
			</view>
			<view>
				<text style="font-size: 35rpx;font-weight: bold">{{house.address}}</text>
			</view>
		</view>
		<view class="home-information">
			<view class="information">
				<text style="font-size: 28rpx;color:azure">{{house.scale}}</text>
			</view>
			<view class="information1">
				<view class="lx1">
					<text style="font-size: 20rpx;">按季付</text>
					<text style="color:red;font-size: 30rpx">{{house.price}}</text>
				</view>

				<view class="lx">
					<text style="font-size: 20rpx;">类型</text>
					<text>{{house.type}}</text>
				</view>

				<view class="lx1">
					<text style="font-size: 20rpx;">房子面积</text>
					<text style="text-decoration:underline">{{house.area}}</text>
				</view>
			</view>
		</view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" enable-overlooking="true" enable-scroll="false" :latitude="house.lat"
					:longitude="house.lng" :markers="covers" @markertap="mark">
				</map>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		data() {
			return {
				master:{},
				userId:"",
				house: {
					imgUrls: [],
					masterId:""
				},
				id: 1,
				currentNum: 0, // 当前显示的图片索引  
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				text: '无头像',
				lng: "", //经度     中心点的
				lat: "", //纬度
				covers: [{
					id: "1",
					joinCluster: "ture",
					latitude: '26.884861',
					longitude: '112.68206',
					callout: {
						content: "这里是1",
						display: "BYCLICK",
						color: "#blue",
						fontSize: "12",
						bgColor: "#F76425",
						borderRadius: "5",
						padding: '10',
					},
				}, ]
			};
		},
		methods: {
			getHouse() {
				uni.showLoading({
					title: "数据加载中",
					mask: true
				})
				uni.request({
					url: this.websiteUrl + "TN-INDEX/house/details",
					data:{
						houseId : this.id,
						userId: this.userInfo.id,
					},
					success: res => {
						this.house = res.data.data.house
						let updatePoints = [{
							id: this.house.id,
							joinCluster: "ture",
							latitude: this.house.lat,
							longitude: this.house.lng,
						}]
						this.covers = updatePoints,
						this.getmaster()
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			getmaster(){
				uni.request({
					url:this.websiteUrl + "TN-USER/user/info",
					 data:{
						 userId : this.house.masterId
					 },
					 success:res=>{
						 this.master = res.data.data
					 }
				})
			},
			changeHandler(e) {
				this.currentNum = e.current // 更新当前显示的图片索引  
			},
			mark(e) {
				console.log("mark", e.detail.markerId)
			},
		},
		onLoad(id) {
			console.log(id)
			this.id = id.id
			this.getHouse()
		}
	}
</script>

<style lang="scss">
	.img {
		width: 100%;
		height: 400rpx;
		background-color: rebeccapurple;
	}



	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.home-owner {
		margin: 20rpx;
		width: 100%;
		height: 100%;
	}

	.oimg {
		display: flex;
	}

	.subscribe {
		border-radius: 30rpx;
		border: 1rpx #878787 solid;
		width: 90rpx;
		height: 60rpx;
		line-height: 50rpx;
		text-align: center;
		color: black;
		margin-top: 10rpx;
		margin-left: 450rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background-color: yellow;
	}

	.home-information {
		margin: 20rpx;
		width: 95%;
		height: 200rpx;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
		border-radius: 40rpx;
	}

	.information {
		border-radius: 30rpx;
		width: 300rpx;
		height: 60rpx;
		line-height: 50rpx;
		text-align: center;
		color: black;
		margin-top: 10rpx;
		margin-left:26%;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background-color: #00B518;
	}

	.information1 {
		width: 100%;
		height: 100rpx;
		display: inline-flex;
	}

	.lx {
		width: 58rpx;
		height: 90rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.lx1 {
		width: 90rpx;
		height: 100rpx;
		margin-left: 100rpx;
		margin-right: 80rpx;
	}
</style>